<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <!--    <link rel="stylesheet" href="css/account.css" type="text/css" media="screen"/>-->
    <!--    <link rel="stylesheet" href="css/test.css" type="text/css" media="screen"/>-->
    <meta charset="UTF-8">
    <title>Edit Account Information</title>

</head>
<body>
<div th:replace="common/top"></div>

<section class="content">
    <main>
        <div class="container">

                <div align="right"><a href="/account/viewAccounts" class="btn-close">Discard</a></div>
                <form action="/account/editAccount" method="post">
                    <section class="section">
                        <h4>User Information</h4>
                        <div class="field is-horizontal">
                            <div class="field-label">
                                <label class="label">User ID</label></div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <p th:text="${session?.account.username}"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="password" class="label">New password</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="password" id="password" name="password" value="${session?.account.password}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="repeatPassword" class="label">Repeat password</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="password" id="repeatPassword" name="repeatPassword"
                                               value="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section class="section">
                        <h4>Account Information</h4>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="firstname" class="label">First name:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="firstname" id="firstname"
                                               th:value="${session?.account.firstName}">
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="lastname" class="label">Last name:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="lastname" id="lastname"
                                               th:value="${session?.account.lastName}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="email" class="label">Email:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="email" id="email"
                                               th:value="${session?.account.email}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="phone" class="label">Phone:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="phone" id="phone"
                                               th:value="${session?.account.phone}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="address1" class="label">Address 1:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="address1" id="address1"
                                               th:value="${session?.account.address1}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="address2" class="label">Address 2:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="address2" id="address2"
                                               th:value="${session?.account.address2}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="city" class="label">City:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="city" id="city"
                                               th:value="${session?.account.city}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="state" class="label">State:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="state" id="state"
                                               th:value="${session?.account.state}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="zip" class="label">Zip:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="zip" id="zip"
                                               th:value="${session?.account.zip}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="country" class="label">Country:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="country" id="country"
                                               th:value="${session?.account.country}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section class="section">
                        <h4>Profile Information</h4>
                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label class="label">Language: </label>
                            </div>
                            <div class="field-body">
                                <div class="field is-narrow">
                                    <div class="control">
                                        <div class="select is-fullwidth">
                                            <select name="languagePreference">
                                                <option value="Chinese"
                                                        th:selected="${session?.account.languagePreference}=='Chinese'">
                                                    Chinese
                                                </option>
                                                <option value="English"
                                                        th:selected="${session?.account.languagePreference}=='English'">
                                                    English
                                                </option>
                                                <option value="French"
                                                        th:selected="${session?.account.languagePreference}=='French'">
                                                    French
                                                </option>
                                                <option value="Russian"
                                                        th:selected="${session?.account.languagePreference}=='Russian'">
                                                    Russian
                                                </option>
                                                <option value="Arabic"
                                                        th:selected="${session?.account.languagePreference}=='Arabic'">
                                                    Arabic
                                                </option>
                                                <option value="German"
                                                        th:selected="${session?.account.languagePreference}=='German'">
                                                    German
                                                </option>
                                                <option value="Japanese"
                                                        th:selected="${session?.account.languagePreference}=='Japanese'">
                                                    Japanese
                                                </option>
                                                <option value="Spanish"
                                                        th:selected="${session?.account.languagePreference}=='Spanish'">
                                                    Spanish
                                                </option>
                                                <option value="Portuguese"
                                                        th:selected="${session?.account.languagePreference}=='Portuguese'">
                                                    Portuguese
                                                </option>
                                                <option value="Hindi">Hindi</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label class="label">Favourite Category:</label>
                            </div>
                            <div class="field-body">
                                <div class="field is-narrow">
                                    <div class="control">
                                        <div class="select is-fullwidth">
                                            <select name="favouriteCategoryId">
                                                <option value="Fish"
                                                        th:selected="${session?.account.favouriteCategoryId}=='Fish'">
                                                    Fish
                                                </option>
                                                <option value="Dogs"
                                                        th:selected="${session?.account.favouriteCategoryId}=='Dogs'">
                                                    Dogs
                                                </option>
                                                <option value="Reptiles"
                                                        th:selected="${session?.account.favouriteCategoryId}=='Reptiles'">
                                                    Reptiles
                                                </option>
                                                <option value="Cats"
                                                        th:selected="${session?.account.favouriteCategoryId}=='Cats'">
                                                    Cats
                                                </option>
                                                <option value="Birds"
                                                        th:selected="${session?.account.favouriteCategoryId}=='Birds'">
                                                    Birds
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label">
                                <label for="listOption" class="label">Enable List</label>
                            </div>
                            <div class="field-body">
                                <div class="field is-narrow">
                                    <div class="control">
                                        <input type="checkbox" id="listOption" name="listOption" value="listOption"
                                               th:cheched="${session?.account.listOption}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label">
                                <label for="BannerOption" class="label">Enable Banner</label>
                            </div>
                            <div class="field-body">
                                <div class="field is-narrow">
                                    <div class="control">
                                        <input type="checkbox" id="BannerOption" name="BannerOption"
                                               value="BannerOption"
                                               th:cheched="${session?.account.bannerOption}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field-body">
                            <div class="field">
                                <div class="control">
                                    <button class="button is-primary" type="submit" name="editAccount" id="submit">
                                        Save
                                    </button>
                                </div>
                            </div>
                        </div>
                    </section>
                        <!--                        <input id="submit" type="submit" name="editAccount" value="Save" class="button">-->
                </form>

            </div>
    </main>
</section>
<div th:replace="common/bottom"></div>
</body>
</html>